<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>代办管理</title>
<% request.setAttribute("menu", 1); %>
<%@ include file="/WEB-INF/page/public/contentmeta.jsp"%>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<%=basePath%>css/global.css" media="all" />
<link rel="stylesheet" href="<%=basePath%>plugins/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="<%=basePath%>css/system.css" media="all"/>
<link rel="stylesheet" href="<%=basePath%>css/tab.css" media="all" />
</head>
<body>

<div class="admin-tab admin-user">
		<div class="tab-condition">
			<form class="layui-form clefix" id="zyform"  action="/customer/commurl" method="post">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="text" name="keyWord" id="keyWord" autocomplete="off" placeholder="请输入关键字" class="layui-input" value="${pager.params.keyWord }">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="width: 170px;">
						<select name="state" id="state" lay-filter="state" class="typeclass">
							<option value="">请选择状态</option>
							<option value="-1" <c:if test="${pager.params.state == -1}">selected</c:if>>全部 </option>
							<option value="0" <c:if test="${pager.params.state == 0}">selected</c:if>>草稿</option>
							<option value="1" <c:if test="${pager.params.state == 1}">selected</c:if>>待审批</option>
							<option value="2" <c:if test="${pager.params.state == 2}">selected</c:if>>审批中</option>
							<option value="3" <c:if test="${pager.params.state == 3}">selected</c:if>>审批通过</option>
							<option value="4" <c:if test="${pager.params.state == 4}">selected</c:if>>审批驳回</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="width: 170px;">
						<select name="consign" id="consign" lay-filter="consign" class="typeclass">
							<option value="">请选择合同状态</option>
							<option value="-1" <c:if test="${pager.params.consign == -1}">selected</c:if>>全部</option>
							<option value="0" <c:if test="${pager.params.consign == 0}">selected</c:if>>未签合同</option>
							<option value="1"<c:if test="${pager.params.consign == 1}">selected</c:if>>已签合同</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<input name="skipToPage" id="skipToPage" type="hidden" value="${pager.pageNo}"> 
					<input type="hidden" id="pageNo" name="pageNo" value="${pager.pageNo}"> 
					<input type="hidden" id="totalPage" name="totalPage" value="${pager.totalPages}">
					<button class="layui-btn TM-btn-search searchbtn" type="button">
						<i class="layui-icon layui-unselect layui-tab-close">&#xe615;</i>搜索
					</button>
					<button class="layui-btn refreshbtn" type="button">
						<i class="layui-icon layui-unselect layui-tab-close ">&#x1002;</i>刷新
					</button>
				</div>
			</form>
			<div class="TM-tab-info">
				<!-- <a class="layui-btn layui-btn-primary layui-btn-small  sqdbbtn"><i class="layui-icon">&#xe621;</i>申请代办</a>  -->
				<a class="layui-btn layui-btn-primary layui-btn-small  refreshbtn"><i class="layui-icon">&#x1002;</i>刷新</a>
			</div>
		</div>
		<div class="layui-field-box">
			<table class="site-table table-hover TM-table3">
				<thead>
					<tr>
						<th style="width: 10%;">受理建造师</th>
						<th style="width: 14%;">代办地点</th>
						<th style="width: 12%;">代办人</th>
						<th style="width: 12%;">代办金额</th>
						<th style="width: 10%;">合同</th>
						<th style="width: 15%;">申请时间</th>
						<th style="width: 12%;">审批状态</th>
						<th style="width: 15%;">操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="obj" items="${pager.resultList}" varStatus="o1">
						<tr>
							<td>${obj.customerInfo.cname}</td>
							<td>${obj.commissionInfo.address}</td>
							<td>${obj.commissionInfo.name}</td>
							<td><fmt:formatNumber value="${obj.commissionInfo.money}" pattern="#,#00"/>元</span></td>
							<td>${obj.conid == 0 ? '未签合同':'已签合同'}</td>
							<td>${obj.commissionInfo.createdate.substring(0,10)}</td>
							<td class="bhsptd" appdata="${obj.commissionInfo.approvestate}" comiddata="${obj.comid}">
								<c:if test="${obj.commissionInfo.state == 0}">
									未提交审批
								</c:if>
								<c:if test="${obj.commissionInfo.state > 0}">
									<c:if test="${obj.commissionInfo.approvestate == 0}">待审批</c:if>
									<c:if test="${obj.commissionInfo.approvestate == 1}">审批中</c:if>
									<c:if test="${obj.commissionInfo.approvestate == 2}">审批通过</c:if>
									<c:if test="${obj.commissionInfo.approvestate == 3}">审批驳回</c:if>
								</c:if>
							</td>
							<td>
								<a class="layui-btn layui-btn-normal layui-btn-mini ckbtn" data="${obj.comid}">查看</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div class="admin-table-page">
				<div id="page" class="page"></div>
			</div>
		</div>
	</div>
	
	<script>
		layui.config({
			base : 'plugins/layui/modules/'
		});
		layui.use([ 'element', 'laypage',"laytpl", 'form', 'laydate', 'layer' ],function() {
			var $ = layui.jquery, 
				laypage = layui.laypage, 
				layer = layui.layer,
				laytpl = layui.laytpl,
				element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
			var form = layui.form();
			//用于标记是否正在提交合同
			var tjstate =0;
			
			//更新渲染  
		    form.render();
			
			//点击搜索
			$(".searchbtn").on("click",function(){
				$("#skipToPage").val(1);
				$("#zyform").submit();
			});
			
			//点击查看
			$(".ckbtn").on("click",function(){
				var id = $(this).attr("data");
				var url= "/customer/commissioninfo?comid="+id;
				//打开弹窗
				parent.layer.open({
	                title:'代办详情',
	                type:2,
	                content:url,
	                shadeClose:true,
	                btnAlign:'c',
	                area:['70%','90%']
	            });
			})
			
			//移上去显示驳回理由
			$(document).on("mouseover",".bhsptd",function(){
				layer.closeAll();
				var appstate = $(this).attr("appdata");
				var comid = $(this).attr("comiddata");
				var ele = $(this);
				//只有在审批驳回的情况下才会显示
				if (appstate == 3) {
					//查询驳回理由的ajax
					$.ajax({
						type : "post",
						data : {comid : comid},
						url : "/customer/overrulereason",
						dataType : "json",
						async : false,
						success : function(data){
							layer.tips(data, ele, {
		    					tips: [1,'#f7625e'],
		    					area:["400px"],
		    					time:5000,
		    	     		 tipsMore: true
		    	     		});
						}
					});
				}
			});
			
				
			//申请代办的表单
			$("#hetongform").validate({
				rules: {
					name : {
						required:true
					},
					account : {
						required:true
					},
					money : {
						required:true,
						digits:true
					},
					address: {
						required:true
					},
					bank: {
						required:true
					},
					phone: {
						required:true
					},
				},
				messages: {
					name : {
						required:"请输入代办人姓名"
					},
					account : {
						required:"请输入代办人账户"
					},
					money : {
						required:"请输入打款金额",
						digits:"请填写正常金额"
					},
					address: {
						required:"请输入代办地点"
					},
					bank: {
						required:"请输入开户行"
					},
					phone: {
						required:"请输入联系电话"
					},
				},
				errorPlacement: function(error, element) {
	 	    		 tjstate =0;
	 				layer.tips(error.text(), element, {
	 					tips: [2,tipColor],
	 	     		 tipsMore: true
	 	     		});
	 	   		},
				submitHandler: function(formobj){
					if(validatezstj()){
						tjstate =1;
						var values = $("#hetongform").serialize();
						$.ajax({
							type : "post",
	         		 		url : "/customer/savecommission",
	         		 		data : values,
	         		 		dataType : "json",
	         		 		async : false,
	         		 		success : function(data){
	         		 			window.location.reload();
	         		 		}
						});
					}
				}
			});
			
			//验证证书相关条件
			var validatezstj = function(){
				var result =true;
				var trs = $(".tb_zs tr");
				if(trs.length<1){
					layer.tips("请选择证书", $("#sxzs"), {
						tips: [1,tipColor],
						tipsMore: true
					});
					return false;
				}
				return result;
			}
			
			//点击申请代办
			$(".sqdbbtn").on("click", function() {
				
				layer.open({
					title:'申请代办',
					type:1, 
					content:$('#TM-layui-hetong'),
					btn: ['提交审批','保存', '取消'],
					shadeClose:true,
					scrollbar:true,
					btnAlign:'c',
					area: ['99%','99%'],
					yes: function(){
						//这里是直接提交并审批
						if(tjstate ==0){
							$("#sqstate").val(1);
							if(validatezstj()){
								$("#hetongform").submit();
							} 
						}else{
							layer.msg("正在提交申请,请勿重复提交",{icon: 0});
						}
					},
					btn2 : function(){
						//这里是保存成草稿
						if(tjstate ==0){
							$("#sqstate").val(0);
							if(validatezstj()){
								$("#hetongform").submit();
							} 
						}else{
							layer.msg("正在提交申请,请勿重复提交",{icon: 0});
						}
						return false;
					}
				});
			});
			
			//为了后面关闭这个弹窗
			var zspop = "";
			//点击添加建造师
			$(".zhengshu").on("click",function(){
								
				zspop = layer.open({
	           		title:'添加证书',
	           	 	type:1,
	           	 	id:"tjzs",
					shadeClose: true,
					content:$('#TM-layui-zhengshu'),
					btnAlign:'c',
					area:['90%','95%']
				}); 
			});
			
			//证书搜索
			$(".zssearchbtn").on("click",function(){
				var kd =  $.trim($("#zskeyword").val());
				$("#skpg").val(1);
				if(kd.length<1){
					layer.tips("请输入关键字", "#zskeyword", {
						tips: [1,'#f7625e'], 
						time:5000,
						tipsMore: false
					});
					return false;
				}else{
					$("#zskeyword").val(kd);
	    		    var values = $("#zssearch").serialize()
	    			var result = getZsUser(values);
	    		    var getTpl = $("#zslb").html();
					
	    		    laytpl(getTpl).render(result, function(html){
						$(".tb_customerzs").html(html);
					});
	    		    
					laypage({
						cont: 'zspage',
						curr: 1,//'${pager.pageNo}'
						pages: result.totalPages,//'${pager.totalPages}' //总页数
						groups: 5, //连续显示分页数
						skip: true,
						jump: function(obj, first) {
							//得到了当前页，用于向服务端请求对应数据
							var curr = obj.curr;
							if(!first) {
								$("#skpg").val(curr);
								values = $("#zssearch").serialize()
								result = getZsUser(values); 
								var getTpl = $("#zslb").html();
								laytpl(getTpl).render(result, function(html){ 
									$(".tb_customerzs").html(html); 
								}); 
							}
						}
					});  
				}
			})
			
			//证书添加
			$(document).on('click','.addzs',function(){
				var result = eval('(' + $(this).attr("data") + ')') ,
				getTpl = $("#zs").html();
				if($(".tb_zs  tr[data="+result.id+"]").length>0){
				layer.msg('请勿重复添加' ,{icon: 0});
					return false;
				}
				laytpl(getTpl).render(result, function(html){
				$(".tb_zs").append(html);
				layer.close(zspop);
					//view.innerHTML = html;
				});
			});
			
			//证书删除
			$(document).on('click','.deletezs',function(){
				var id = $(this).attr("data");
				layer.confirm('确定要删除该证书吗？', {
					btn: ['确定','取消'] //按钮
				}, function(){
					$(".zs"+id).remove(); 
					layer.msg("删除成功",{icon:1 });
				}, function(){}); 
			});
			
			//清除证书搜索条件
			$(document).on('click','.zscleanbtn',function(){
				$("#zskeyword").val("");
				$("#sestate").val(-1);
				//更新渲染  
			    form.render();
			});
			

			var pageNo = $("#pageNo").val();
			var totalPage = $("#totalPage").val();
			//page
			laypage({
				cont : 'page',
				curr : pageNo//'${pager.pageNo}'
				,
				pages : totalPage//'${pager.totalPages}' //总页数
				,
				groups : 5 //连续显示分页数
				,
				jump : function(obj, first) {
					//得到了当前页，用于向服务端请求对应数据
					var curr = obj.curr;
					if (!first) {
						$("#skipToPage").val(curr);
						$("#zyform").submit();
					}
				}
			});
			
			//搜索证书
			getZsUser = function (o){
				var result ="";
				var values = o;
					$.ajax({
						type : "post",
						url : "/customer/userlist",
						data : values,
						async:false,
						dataType : "json",
						success : function(data){
							result = data;
						}
	        		});
	    	  	 return result
	    	 }
			
			//银行联动
			$("#bank").on("keyup",function(){
				var key = $(this).val();
				var html = "";
				if (key != null && key != "") {
					$.ajax({
						type : "post",
						data : {key : key},
						url : "/customer/selectbankname",
						dataType : "json",
						 scriptCharset: 'utf-8',
						success : function(data){
							if (data.length > 0) {
						        $.each(data,function(i, item) {
						        	 html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + item.bankname + "</div>"
						        });
							} else {
								html = "";
							}
							if(html != ""){
		    	      	        $("#append").show().html(html);
		    	      	    }else{
		    	      	        $("#append").hide().html("");
		    	      	    }
						}
					});
				} else {
					return;
				}
				
			});
		
		});
		
		function getFocus(obj){
	  	    $(".item").removeClass("addbg");
	  	    $(obj).addClass("addbg");
	  	}
	  	function getCon(obj){
	  	    var value = $(obj).text();
	  	    $("#bank").val(value);
	  	    $("#append").hide().html("");
	  	}
	</script>
	
</body>
</html>